// 放大镜
 
function fangda(){
     // 1获取节点
    let div1Obj = document.getElementById("div1");
    let smallObj = document.getElementById("small");
    let smallImgObj = smallObj.firstElementChild;
    let maskObj = smallObj.lastElementChild;
    let bigObj = document.getElementById("big");
    let bigImgObj = document.getElementById("img");
    let goodswrap = document.querySelector(".goods-detail-wrap"); 
  
    //2 给small绑定鼠标移入事件
    smallObj.onmouseover = () => {
      //2-1显示mask和大图
      maskObj.style.display = "block";
      bigObj.style.display = "block";
    };
  
    //3 鼠标移出消失
    smallObj.onmouseout = () => {
      //3-1隐藏mask和大图
      maskObj.style.display = "none";
      bigObj.style.display = "none";
    };
  
    //4 鼠标移动让mask跟随
    smallObj.onmousemove= (eve) => {
      //4-1 获取鼠标的实时位置
      let { pageX, pageY } = eve;
      
      // console.log(pageX, pageY);
      //4-2 获取div1的left和top值，计算出鼠标相对于small的坐标
  
      let tmpX = pageX - div1Obj.offsetLeft - goodswrap.offsetLeft - maskObj.offsetWidth/2;
      let tmpY = pageY - div1Obj.offsetTop - goodswrap.offsetTop - maskObj.offsetHeight/2;

      //4-3边界的设置
      if (tmpX < 0)  tmpX = 0;
      if (tmpY < 0)  tmpY = 0;

      //计算出最大的left和top值
      let maxLeft = smallObj.offsetWidth - maskObj.offsetWidth;
      let maxTop = smallObj.offsetHeight - maskObj.offsetHeight;

      if (tmpX > maxLeft) tmpX = maxLeft;
      if (tmpY > maxTop) tmpY = maxTop;
      //给mask设置位置
      maskObj.style.top = tmpY + "px";
      maskObj.style.left = tmpX + "px";
  
      //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
      let bigImgMaxLeft = bigImgObj.offsetWidth - bigObj.offsetWidth;
      let bigimgMaxTop = bigImgObj.offsetHeight - bigObj.offsetHeight;
  
      //由公式计算出大图的left和top
      let bigLeft = (tmpX / maxLeft) * bigImgMaxLeft;
      let bigTop = (tmpY / maxTop) * bigimgMaxTop;
  
      //设置给大图
      bigImgObj.style.left = -bigLeft + "px";
      bigImgObj.style.top = -bigTop + "px";
    };
  
}